<template>
    <div class="mall">
      <mt-search
  cancel-text="取消"
  placeholder="搜索">
</mt-search>
<div class="left">
<div :class="item.classname" v-for="(item, index) in leftlist" :key="index" :id="item.classifyId" v-on:click="handlechoose(item.list,item.classifyId,$event)">
  {{item.classifyName}}
  </div>
</div>
<div class="right">
<div class="rightevery"   v-on:click="handle(item)" v-for="(item, index) in rightlist" :key="index">
  <img :src="'https://cdn.bestseller.com.cn'+item.miniprogramUrl">
  <p>{{item.classifyName}}</p> 
  </div>  
</div>
<mt-popup
  v-model="popupVisible"
  position="right"
  popup-transition="popup-fade">
  <router-link :to="{name:'detail',params:{item:items}}" tag="div" class="enter">
    <img :src="'https://cdn.bestseller.com.cn'+items.h5Url" alt="qi">
    <img :src="'https://cdn.bestseller.com.cn'+items.miniprogramUrl" alt="qi" >
    <p>{{items.classifyName}}</p>
  </router-link>
</mt-popup>
  </div>   
</template>

<script>
// v-on:click="add({firstid:firstid,id:items.classifyId})"
import {response} from '../ajaxservice'
import {mapState,mapMutations} from 'vuex'

export default {
  name: 'Mall',
  data(){
    return{
      leftlist:[],
      rightlist:[],
      popupVisible:false,
      items:{},
      firstid:null
    }
  },
  mounted(){
  response.get()
  .then(res=>{
    this.leftlist=res.map(item=>{
      item.classname='leftevery'
      return item  
    })
    this.rightlist=this.leftlist[0].list
  }) 
  },
  computed:{
  ...mapState(['id','user'])  
  }
  ,
  methods:{
   handlechoose(list,id,e){
   if(e.target.id===id){
   e.target.className='click'
   }
   this.rightlist=list;   
   },
   handle(item){
    this.items=item;
  return this.popupVisible=!this.popupVisible
  },
  ...mapMutations(['add']) 
  }
}
</script>

<style lang='scss' scoped>
.mint-search{height: 50px;}
.left{width: 150px;color: #424242;float: left;
.leftevery{padding: 10px 0;border-bottom: 1px solid black;text-align: center;&:hover{background: black;color: white;padding: 30px;text-align: center;}}
.click{background: black;color: white;padding: 30px;text-align: center;}}
.right{float:left;margin-left:0px;background: #b0b0b0;width: 195px;
.rightevery{img{width: 30px;margin-right: 10px;}p{float: left;margin-left: 20px;line-height: 30px}
  padding: 10px 0;border-bottom: 1px solid black;text-align: center;&:hover{background: black;color: white;}}
}
.mint-popup{
  width: 80%;
  top: 38%;
  height: 300px;
  img{width: 100%}
  p{text-align: center;background:white;margin-top: -2px;height: 30px;}
}
</style>
